<template>
  <transition :name="transition ? 'my-slide-up' : ''">
    <div
      v-if="show"
      :class="['my-number-keyboard', `my-number-keyboard--${theme}`]"
      :style="{zIndex: zIndex}"
      @touchstart="onTouchstart"
      @animationend="onAnimationend"
      @webkitanimationend="onAnimationend">
      <div
        v-if="title || showTitleClose || $slots['title-left']"
        class="my-number-keyboard__title my-hairline--top">
        <slot name="title-left">
          <span>{{title}}</span>
        </slot>
        <span v-if="showTitleClose" class="my-number-keyboard__close" @click="onClose">{{closeButtonText}}</span>
      </div>
      <div class="my-number-keyboard__body">
        <my-key
          v-for="key in keys"
          :key="key.text"
          :type="key.type ? key.type : []"
          :text="key.text"
          @press="onPress">
        </my-key>
      </div>
      <div v-if="theme === 'custom'" class="my-number-keyboard__sidebar">
        <my-key :text="deleteButtonText" :type="delKeyType" @press="onPress"></my-key>
        <my-key :text="closeButtonText" :type="closeKeyType" @press="onPress"></my-key>
      </div>
    </div>
  </transition>
</template>

<script>
import myKey from './key.vue'
const CLOSE_KEY_TYPE = ['blue', 'big']
const DELETE_KEY_TYPE = ['delete', 'big', 'gray']
export default {
  name: 'my-number-keyboard',
  components: {
    myKey
  },
  props: {
    show: Boolean,
    title: String,
    closeButtonText: String,
    deleteButtonText: {
      type: String,
      default: '删除'
    },
    theme: {
      type: String,
      default: 'default'
    },
    extraKey: {
      type: String,
      default: ''
    },
    zIndex: {
      type: Number,
      default: 100
    },
    transition: {
      type: Boolean,
      default: true
    },
    showDeleteKey: {
      type: Boolean,
      default: true
    },
    hideOnClickOutside: {
      type: Boolean,
      default: true
    },
    safeAreaInsetBottom: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      closeKeyType: CLOSE_KEY_TYPE,
      delKeyType: DELETE_KEY_TYPE
    }
  },

  watch: {
    show() {
      if (!this.transition) {
        this.$emit(this.show ? 'show' : 'hide')
      }
    }
  },

  computed: {
    keys() {
      let keys = []
      for(let i = 1; i <= 9; i++) {
        keys.push({text: i})
      }

      switch(this.theme) {
        case 'default':
          keys.push(
            {text: this.extraKey, type: ['gray']},
            {text: 0},
            {text: this.deleteButtonText, type: ['gray', 'delete']}
          )
          break;
        case 'custom':
          keys.push(
            {text: 0, type: ['middle']},
            {text: this.extraKey}
          )
          break;
      }
      return keys
    },

    showTitleClose() {
      let {theme, closeButtonText} = this
      return closeButtonText && theme === 'default'
    }
  },

  methods: {
    onPress(text) {
      if (text === '') {
        return;
      }

      if (text === this.deleteButtonText) {
        this.$emit('delete')
      } else if (text === this.closeButtonText) {
        this.onClose()
      } else {
        this.$emit('input', text)
      }
    },

    onTouchstart(event) {
      event.stopPropagation()
    },

    onAnimationend() {
      this.$emit(this.show ? 'show' : 'hide')
    },

    onClose() {
      this.$emit('close')
      this.onBlur()
    },

    onBlur() {
      this.$emit('blur')
    },

    handlers(action) {
      if (this.$isServer) {
        return;
      }

      if (action !== this.handlerStatus && this.hideOnClickOutside) {
        this.handlerStatus = action
        document.body[(action ? 'add' : 'remove') + 'EventListener']('touchstart', this.onBlur)
      }
    }
  },

  mounted() {
    this.handlers(true)
  },

  destroyed() {
    this.handlers(false)
  },

  activated() {
    this.handlers(true)
  },

  deactivated() {
    this.handlers(false)
  }
}
</script>

<style lang="less">
  @import './number-keyboard.less';
</style>
